import { Form, Input, Button, Checkbox } from 'antd'
import { UserOutlined, LockOutlined } from '@ant-design/icons'

import './index.css'

// 导入图片文件
import logo from '../../assets/images/logo.png'

// 1 表单校验
//  antd 的 Form 组件默认支持表单校验

const Login = () => {
	const onFinish = values => {
		// values 是一个对象
		// { mobile, code, remember } 也就是整个表单中所有项的值
		console.log('表单校验成功：', values)
		console.log('Received values of form: ', values)
	}

	return (
		<div className='login'>
			<div className='login-wrapper'>
				<div>
					<img className='logo' src={logo} alt='' />
				</div>

				<Form
					className='login-form'
					//给表单设置默认值
					initialValues={{
						remember: true,
						mobile: '13312345678',
						code: '246810',
					}}
					// 注意：这个事件是在表单校验成功后调用的
					onFinish={onFinish}
					size='large'
				>
					<Form.Item
						name='mobile'
						rules={[
							// required 表示表单项为必填项
							{ required: true, message: '请输入手机号码!' },
							// 注意：此处的配置，仅仅是给出一个校验，不会限制输入的长度
							// { max: 11, message: '手机号码格式不正确' },
							// len 表示这一项的长度
							// message 表示该校验规则失败时，展示给用户的提示
							// { len: 11, message: '手机号码长度为11位' },
							{ pattern: /^1[3-9]\d{9}$/, message: '手机号码格式不正确' },
						]}
					>
						{/* maxLength 限制文本框中输入内容的长度 */}
						<Input placeholder='请输入手机号' maxLength={11} />
					</Form.Item>
					<Form.Item
						name='code'
						rules={[
							{ required: true, message: '请输入验证码!' },
							{
								pattern: /^\d{6}$/,
								message: '请输入正确的验证码',
							},
						]}
					>
						<Input placeholder='请输入验证码' maxLength={6} />
					</Form.Item>
					<Form.Item>
						<Form.Item name='remember' valuePropName='checked' noStyle>
							<Checkbox>我已阅读并同意「用户协议」和「隐私条款」</Checkbox>
						</Form.Item>
					</Form.Item>
					{/* 注意：该 按钮 的类型为 submit，所以，才可以触发表单的校验、提交 */}
					{/* 是通过 htmlType="submit" 属性来指定的 */}
					<Form.Item>
						<Button
							block
							type='primary'
							htmlType='submit'
							className='login-form-button'
						>
							登 录
						</Button>
					</Form.Item>
				</Form>
			</div>
		</div>
	)
}

export default Login
